<template>
	<view>
		<view class="con">
			<view class="con__logo">
				<image src="/static/logo.png" class="con__logo__icon" mode=""></image>
				<text class="con__logo__text">APP名称</text>
			</view>
			<view class="con__form">
				<u--form labelPosition="top" labelWidth='400rpx' :model="model1" :rules="rules" ref="uForm">
					<u-form-item label="账号" prop="userInfo.mobile" borderBottom ref="item1">
						<u--input max v-model="model1.userInfo.mobile" placeholder='请输入手机号码' fontSize='34rpx'
							placeholderStyle='color:#999;' border="none"></u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="userInfo.code" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.code" placeholder='请输入验证码' fontSize='34rpx'
							placeholderStyle='color:#999;' border="none"></u--input>
						<text @tap="getCode" class="con__form__code">{{tips}}</text>
					</u-form-item>
				</u--form>
			</view>
			<view class="con__btn">
				<u-button :loading='loading' @click="submit" loadingText='登录中' text="登录" color="#51CAEF" class="custom-style"></u-button>
			</view>
		</view>
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						mobile: '',
						code: ''
					},
				},
				tips: '',
				// refCode: null,
				seconds: 10,
				rules: {
					'userInfo.mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'userInfo.code': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur','change']
					},
				},
				loading: false
			};
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			submit() {
				let t=this
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					t.loading=true
					setTimeout(()=>{
						t.loading=false
					},2000)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.con {
		padding-top: 150rpx;

		&__logo {
			display: flex;
			flex-direction: column;
			align-items: center;

			&__icon {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 8rpx;
			}

			&__text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #000000;
				line-height: 50rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		&__form {
			padding: 100rpx 64rpx 144rpx;

			&__code {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #51CAEF;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			/deep/.u-form-item__body__left__content__label {
				font-size: 34rpx !important;
				margin: 20rpx 0;
				color: #000000;
			}
		}

		&__btn {
			padding: 0 64rpx;
		}
	}
</style>